<template>
  <section id="article-tags" class="bg-white rounded-xl shadow-sm p-6">
    <h3 class="text-lg font-semibold mb-4">
      <i class="fa fa-tags text-primary mr-2"></i> {{ title }}
    </h3>
    <div class="flex flex-wrap gap-2">
      <a
        v-for="(tag, index) in tags"
        :key="index"
        :href="tag.link"
        class="px-3 py-1 text-xs rounded-full transition-colors"
        :class="{
          'bg-gray-100 text-gray-700 hover:bg-gray-200': !tag.isActive,
          [activeTagClass]: tag.isActive
        }"
        @click="handleTagClick(tag, index)"
      >
        {{ tag.name }}
        <span v-if="showCount && tag.count" class="ml-1">({{ tag.count }})</span>
      </a>
    </div>
  </section>
</template>

<script>
export default {
  name: 'ArticleTags',
  props: {
    // 组件标题
    title: {
      type: String,
      default: '热门标签'
    },
    // 标签数据
    tags: {
      type: Array,
      default: () => [
        { name: '职场沟通', link: '#', isActive: false, count: 128 },
        { name: '团队管理', link: '#', isActive: false, count: 95 },
        { name: '领导力', link: '#', isActive: false, count: 87 },
        { name: '职业发展', link: '#', isActive: false, count: 76 },
        { name: '时间管理', link: '#', isActive: false, count: 65 },
        { name: '向上管理', link: '#', isActive: false, count: 54 },
        { name: '会议技巧', link: '#', isActive: false, count: 48 },
        { name: '远程工作', link: '#', isActive: false, count: 42 },
        { name: '演讲表达', link: '#', isActive: false, count: 38 },
        { name: '冲突处理', link: '#', isActive: false, count: 31 },
        { name: '简历技巧', link: '#', isActive: false, count: 29 },
        { name: '面试沟通', link: '#', isActive: false, count: 26 }
      ]
    },
    // 是否显示标签数量
    showCount: {
      type: Boolean,
      default: false
    },
    // 激活标签的样式类
    activeTagClass: {
      type: String,
      default: 'bg-primary text-white hover:bg-primary/90'
    },
    // 标签间距
    tagGap: {
      type: [Number, String],
      default: 2
    }
  },
  methods: {
    // 处理标签点击事件
    handleTagClick(tag, index) {
      event.preventDefault();
      
      // 触发点击事件
      this.$emit('tag-click', {
        tag,
        index
      });
      
      // 如果设置了链接，可以选择在这里进行跳转
      if (tag.link && tag.link !== '#') {
        window.location.href = tag.link;
      }
    },
    
    // 设置标签数据
    setTags(newTags) {
      this.tags = newTags;
    },
    
    // 激活特定标签
    activateTag(tagName) {
      this.tags.forEach(tag => {
        tag.isActive = tag.name === tagName;
      });
    },
    
    // 添加新标签
    addTag(newTag) {
      if (newTag && typeof newTag === 'object' && newTag.name) {
        this.tags.push({
          name: newTag.name,
          link: newTag.link || '#',
          isActive: newTag.isActive || false,
          count: newTag.count || 0
        });
      }
    },
    
    // 移除标签
    removeTag(tagName) {
      const index = this.tags.findIndex(tag => tag.name === tagName);
      if (index !== -1) {
        this.tags.splice(index, 1);
      }
    }
  },
  
  // 低代码平台支持
  lowcode: {
    meta: {
      componentKey: 'article-tags',
      displayName: '热门标签组件',
      description: '展示热门标签云的组件',
      category: '文章组件',
      version: '1.0.0',
      isContainer: false
    },
    
    configPanel: [
      {
        title: '基础配置',
        fields: [
          {
            name: 'title',
            label: '组件标题',
            type: 'text',
            defaultValue: '热门标签',
            description: '组件的标题文本'
          },
          {
            name: 'tags',
            label: '标签数据',
            type: 'array',
            defaultValue: [],
            description: '标签列表数据'
          },
          {
            name: 'showCount',
            label: '显示标签数量',
            type: 'boolean',
            defaultValue: false,
            description: '是否显示每个标签的数量'
          },
          {
            name: 'activeTagClass',
            label: '激活标签样式',
            type: 'text',
            defaultValue: 'bg-primary text-white hover:bg-primary/90',
            description: '激活状态标签的CSS类'
          },
          {
            name: 'tagGap',
            label: '标签间距',
            type: 'number',
            defaultValue: 2,
            description: '标签之间的间距（像素）'
          }
        ]
      }
    ],
    
    events: [
      {
        name: 'tag-click',
        label: '标签点击事件',
        description: '用户点击标签时触发',
        parameters: {
          tag: 'object',
          index: 'number'
        }
      }
    ],
    
    actions: [
      {
        name: 'setTags',
        label: '设置标签数据',
        description: '设置标签列表数据',
        parameters: [
          {
            name: 'tags',
            type: 'array',
            required: true,
            description: '新的标签列表数据'
          }
        ]
      },
      {
        name: 'activateTag',
        label: '激活特定标签',
        description: '将指定名称的标签设置为激活状态',
        parameters: [
          {
            name: 'tagName',
            type: 'string',
            required: true,
            description: '要激活的标签名称'
          }
        ]
      },
      {
        name: 'addTag',
        label: '添加新标签',
        description: '向标签列表添加新标签',
        parameters: [
          {
            name: 'newTag',
            type: 'object',
            required: true,
            description: '新标签对象'
          }
        ]
      },
      {
        name: 'removeTag',
        label: '移除标签',
        description: '从标签列表中移除指定名称的标签',
        parameters: [
          {
            name: 'tagName',
            type: 'string',
            required: true,
            description: '要移除的标签名称'
          }
        ]
      }
    ]
  }
}
</script>

<style scoped>
/* 基础样式已通过Tailwind CSS实现，这里可以添加额外的自定义样式 */

/* 调整标签链接的过渡效果 */
a {
  transition: all 0.2s ease;
}

/* 增加标签悬停时的动效 */
a:hover {
  transform: translateY(-1px);
}
</style>